<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单：简单</title>
</head>
<body>

    <!-- form 标签：定义整个表单 -->
    <!-- action 属性：提交表单之后，把请求发送到的服务器地址 -->
    <!-- 实际开发中，action 属性肯定是要写一个服务器端地址，但是我们没有服务器端呈现，所以暂时只能写 HTML 文档地址 -->
    <!-- method 属性：指定提交表单时使用的请求方式 -->
    <!-- method 属性可选值 GET：把请求参数放在 URL 地址后面，把请求参数用 & 符号隔开，把请求参数名称和请求参数的值用 = 符号隔开 -->
    <!-- http://localhost:63342/atguigu-project-240704/module01-HTML/pages/target.html?loginAccount=tom2024&loginPassword=123456 -->
    <!-- 请求参数值会以明文的形式显示在浏览器地址栏中，对于密码这样的数据来说，不安全 -->

    <!-- method 属性可选值 POST：没有把请求参数放在 URL 地址后面，而是放在了请求体中 -->
    <!-- 如何看到请求体中的数据呢？
            1、在浏览器上，按 F12 打开开发者工具
            2、提交表单
            3、在开发者工具的 Network 标签中，查看请求体数据
            4、点击请求信息的这一条，就能够看到请求的详细信息
            5、在详细信息中，找到类似 payload、请求负载等这样的字段，点击它，就能够看到请求体中的数据
     -->
    <!-- 请求参数发送到服务器端时使用的格式：请求参数名称=请求参数值&请求参数名称=请求参数值&…… -->
    <!-- 请求方式使用的建议：form 标签中 method 都使用 post
            1、POST 方式会把请求参数数据放在请求体中，不像 GET 方式会暴露在浏览器地址栏
            2、POST 方式发送数据没有大小限制
            3、POST 方式可以用于文件上传
     -->
    <form action="pages/target.html" method="post">
        <!-- 单行文本框：使用 input 标签配合 type 属性取值为 text -->
        <!-- name 属性：给当前请求参数起个名字，将来后端程序接收到请求参数的数据，就是根据请求参数的名字来获取对应的值 -->
        <!-- value 属性：给当前单行文本框设置默认值 -->
        账号：<input type="text" name="loginAccount" value="tom2024" /><br/>

        <!-- 密码框：使用 input 标签配置 type 属性取值为 password -->
        <!-- 密码框会把输入的密码自动变成圆点，隐藏用户输入的真实数据，其它方面和单行文本框一样 -->
        密码：<input type="password" name="loginPassword" value="123456" /><br/>

        <!-- 提交按钮：点击后会提交表单 -->
        <button type="submit">提交按钮</button>

        <!-- 重置按钮：点击后把所有表单项都恢复为默认值 -->
        <button type="reset">重置按钮</button>

        <!-- 普通按钮：点击后没有任何效果，通常配合 JavaScript 使用 -->
        <button type="button">普通按钮</button>
    </form>

</body>
</html>